{% from "macros.html" import render_pagination %}

<!DOCTYPE html>
<html>
<head>
    <title>车辆管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <h1 class="page-title">车辆管理</h1>
        <div class="nav-menu">
            <a href="{{ url_for('index') }}" class="nav-item">返回首页</a>
            <a href="#" class="nav-item add-btn" onclick="showModal()">新增车辆</a>
        </div>
        
        <div class="section">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>车主</th>
                        <th>联系电话</th>
                        <th>车型</th>
                        <th>车牌号</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for vehicle in vehicles %}
                    <tr>
                        <td>{{ vehicle.id }}</td>
                        <td>{{ vehicle.owner.name if vehicle.owner else '-' }}</td>
                        <td>{{ vehicle.owner.phone if vehicle.owner else '-' }}</td>
                        <td>{{ vehicle.model }}</td>
                        <td>{{ vehicle.plate_number }}</td>
                        <td>{{ vehicle.notes }}</td>
                        <td>
                            <a href="#" class="action-btn edit-btn" onclick="showEditModal('{{ vehicle.id }}', '{{ vehicle.customer_id }}', '{{ vehicle.model }}', '{{ vehicle.plate_number }}', '{{ vehicle.notes }}')">编辑</a>
                            <a href="#" class="action-btn delete-btn">删除</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            
            {{ render_pagination(pagination, 'vehicles') }}
        </div>
    </div>

    <div id="addModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="hideModal()">&times;</span>
            <h2>新增车辆</h2>
            <form action="{{ url_for('add_vehicle') }}" method="POST">
                <div class="form-group">
                    <label for="customer">选择车主</label>
                    <select id="customer" name="customer_id" required>
                        <option value="">请选择车主</option>
                        {% for customer in customers %}
                        <option value="{{ customer.id }}">{{ customer.name }} ({{ customer.phone }})</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="model">车型</label>
                    <input type="text" id="model" name="model" required>
                </div>
                <div class="form-group">
                    <label for="plate_number">车牌号</label>
                    <input type="text" id="plate_number" name="plate_number" required>
                </div>
                <div class="form-group">
                    <label for="notes">备注</label>
                    <textarea id="notes" name="notes"></textarea>
                </div>
                <button type="submit" class="nav-item add-btn">保存</button>
            </form>
        </div>
    </div>

    <div id="editModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="hideEditModal()">&times;</span>
            <h2>编辑车辆</h2>
            <form action="{{ url_for('edit_vehicle') }}" method="POST">
                <input type="hidden" id="edit_id" name="id">
                <div class="form-group">
                    <label for="edit_customer">选择车主</label>
                    <select id="edit_customer" name="customer_id" required>
                        {% for customer in customers %}
                        <option value="{{ customer.id }}">{{ customer.name }} ({{ customer.phone }})</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit_model">车型</label>
                    <input type="text" id="edit_model" name="model" required>
                </div>
                <div class="form-group">
                    <label for="edit_plate_number">车牌号</label>
                    <input type="text" id="edit_plate_number" name="plate_number" required>
                </div>
                <div class="form-group">
                    <label for="edit_notes">备注</label>
                    <textarea id="edit_notes" name="notes"></textarea>
                </div>
                <button type="submit" class="nav-item add-btn">保存</button>
            </form>
        </div>
    </div>

    <script>
        function showModal() {
            document.getElementById('addModal').style.display = 'block';
        }
        
        function hideModal() {
            document.getElementById('addModal').style.display = 'none';
        }
        
        window.onclick = function(event) {
            var modal = document.getElementById('addModal');
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        function showEditModal(id, customerId, model, plateNumber, notes) {
            document.getElementById('edit_id').value = id;
            document.getElementById('edit_customer').value = customerId;
            document.getElementById('edit_model').value = model;
            document.getElementById('edit_plate_number').value = plateNumber;
            document.getElementById('edit_notes').value = notes;
            document.getElementById('editModal').style.display = 'block';
        }
        
        function hideEditModal() {
            document.getElementById('editModal').style.display = 'none';
        }
    </script>
</body>
</html> 